Build Spec & Design System

1 · What EKO Is

One-liner. A score-sheet-powered media engine for grassroots/AAU basketball that turns every tournament game into rankings, recaps, leaderboards, and player profiles — at scale, automatically.

Audience. Players & families (verified profiles, shareable stats), coaches & teams (claimable pages), tournament directors (run score sheets → instant coverage), and brands (standard ad inventory).

Core promise. "Earned on the court, not voted." Rankings and records are computed from verified data — points by quarter, threes, free throws, Player-of-the-Game awards, and team results — aggregated by player, team, division, and tournament. Class year is always shown; nothing is editorialized beyond the numbers.

2 · Color Palette

3 · Typography

Type scale (px). Page H1 40–46 · section H2 22–26 · card title 16–18 · body 14–18 · label/eyebrow 8–11 (uppercase, tracked). Minimum body 13px. Numbers/scores always Archivo.

4 · Components & Tokens

• Radii. Cards 11–16px · pills/buttons 18–26px · small chips 5–8px.
• Shadow. Page frame only: 0 44px 100px -34px rgba(20,17,15,.42). Content stays flat with 1px #ECE7E2 borders.
• Movement pills. Riser green #52B85C on #EAF6EC · faller red #C0463A on #F7E9E7 · flat gray #8C857C on #F1ECE6. Used consistently in all ranking/mover lists.
• Buttons. Primary = tangerine fill, white text. Secondary = 1px border, ink text. Tab = 2–3px tangerine underline on active.
• Tables/lists. 2px ink bottom-border section headers; 1px #F1ECE6 row dividers; alt row #FCFAF8.
• Ad units — standard IAB only. Desktop: leaderboard 728×90, medium rectangle 300×250, half-page 300×600, billboard 970×250, skyscraper 160×600. Mobile: 320×50 anchor, 320×100, 300×250 inline. Each labeled "ADVERTISEMENT"; one per viewport; image ads use a dark gradient with white text.

5 · Information Architecture

• Primary nav (mega). Home · Rankings (Athlete Rankings, Top Performers, Team Rankings, Team Top Performers) · Athletes (Directory, Compare) · Teams (Directory, Compare) · Events · News · Services. Every destination appears exactly once across the menus — no duplicates.
• Your Lens. A global filter in the header: Grade (3rd–11th) + Scope (National → 4 regions → 50 states). Region is nested inside the location picker, not a separate control. Default: 9th Grade · National.
• Tournament microsite. Each event is its own surface with a contextual sub-nav attached under the primary nav: Overview · Standings · Leaderboard · All-Tournament · Games · Records. Box scores live under Games.
• The click-graph. Every player → profile, team → team profile, tournament → event, result → box score. Articles link every named entity. This cross-linking is core, not decorative.
• Two surfaces. A responsive desktop site + a dedicated mobile app (bottom tabs, drawer, in-app reader). They share the design system, content model, and click-graph; each is tuned to its context.

6 · Content Engine & Rules

23 story types on a weekly cadence (see the Content Calendar). The week builds Mon→Sun: previews and rankings midweek, game coverage and champions on the weekend (~3,300 articles/week at scale).

Generation rules. Every article pulls only from verified score-sheet fields (points by quarter incl. 2s/3s/FTs, POG designation, starter status, team result, opponent). Aggregation levels: player, team, division, tournament, season. Class year always included. No opinion, no projections — only what the data supports.

Rankings logic. Players/teams are ordered by an EKO Rating derived from scoring output, efficiency, and strength of schedule (min. 3 games). Movement (▲/▼) is week-over-week. Filters (grade/scope/position) re-rank the set live.

7 · Monetization

• Standard IAB display inventory only (no custom units), so the prototype maps to real ad-serving.
• Desktop: a right-rail 300×250 above the fold + in-feed 300×250 woven through long scrolls; leaderboard option at page top.
• Mobile: a persistent 320×50 anchor above the tab bar (sitewide) + one inline 300×250 every 4–6 items in long lists.
• Rules: one ad per viewport, never two parallel, always labeled, brand mix kept realistic (Nike / Gatorade / State Farm / Under Armour).

8 · Page Inventory

9 · Recreation Brief